<template>
  <div class="product-detail">
    <el-card class="product-card">
      <div class="product-info">
        <div class="product-image">
          <div v-if="product && product.length">
            <!-- 假设Category是一个数组，遍历并显示每个元素 -->
            <div v-for="(product1, index) in product" :key="index">
          <img :src="'http://localhost:8080/image/upload/' + product1.goods_image" alt="Product Image" style="width: 80%; height: 80%;">
        </div>
          </div>
        </div>
        <div class="product-details">
          <div v-if="product && product.length">
            <!-- 假设Category是一个数组，遍历并显示每个元素 -->
            <div v-for="(product1, index) in product" :key="index">
          <h1>{{ product1.goods_name }}</h1>
          <p>{{product1.goods_description }}</p>
          <div class="price">{{product1.goods_price }}</div>
            </div>
          </div>
          <el-button type="primary" @click="addToCart"><el-icon><ShoppingCart /></el-icon></el-button>&nbsp;&nbsp;&nbsp;
          <el-button type="warning" :icon="Star" circle @click="addBookmark"></el-button>

          <div class="quantity-select">
            <span>选择数量</span>&nbsp;&nbsp;
            <el-input-number v-model="form.count" :min="1" :max="5"></el-input-number>&nbsp;&nbsp;<span>(每人限购5件)</span>
          </div>
        </div>
      </div>

      <div class="comment-section">
        <h2>评论</h2>
        <el-input v-model="newComment" placeholder="发表评论" class="comment-input"></el-input>&nbsp;&nbsp;&nbsp;&nbsp;
        <el-button @click="openpostCommentdialoge" type="primary" class="comment-button">发表评论</el-button>


        <div style="margin:20px 0; text-align:left">
          <div style="padding: 10px 0;" v-for="item in comments" :key="item.user_id">
            <div style="display: flex;">
              <div style="width: 80px;"><img :src="`http://localhost:8080/image/upload/${item.user_image}`"
                                             alt="user_image"
                                             style="width: 80%; height: auto; width:50px;order-radius: 50%;"> </div>
              <div style="flex: 1">
                <div>{{item.user_name}}</div>
                <div style="margin-top: 10px;color: #0a53be">{{item.comment_description}}</div>
              </div>
            </div>
          </div>
        </div>

        <div class="recommendation-section">
          <h2>推荐商品</h2>
          <div class="recommendation-list">
            <div v-for="recommendation in recommendations" :key="recommendation.goods_id" class="recommendation-item">
              <router-link :to="{name:'GoodsDetails',params:{goodsId:recommendation.goods_id,categoryId:recommendation.category_id} }">
              <img :src="'http://localhost:8080/image/upload/'+recommendation.goods_image" alt="Recommendation Image" class="recommendation-image">
              </router-link>
              <p>{{ recommendation.goods_name }}</p>
            </div>
          </div>
          <el-button @click="refreshRecommendations" type="primary">刷新推荐商品</el-button>
        </div>
      </div>
    </el-card>
  </div>

  <el-dialog
      v-model="postrate"
      title="评价"
      width="300"
      align-center
  >
    商品质量：
    <el-rate
        v-model="goods_mark"
        show-score
    /><br/>
    物流评分：
    <el-rate
        v-model="logistics_mark"
        show-score
    /><br/>
    服务评分：
    <el-rate
        v-model="service_mark"
        show-score
    />
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="postrate= false">取消</el-button>
        <el-button type="primary" @click="postComment()">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import {ElMessage, ElMessageBox} from 'element-plus'
import {ShoppingCart, Star,StarFilled} from "@element-plus/icons-vue";
export default {

  components:{
    ShoppingCart,
    Star,
    StarFilled
  },
  computed:{
    ShoppingCart(){
      return ShoppingCart
    },
    Star(){
      return Star
    },
    StarFilled(){
      return  StarFilled
    }
  },
  data() {
    return {
      user_id:'',
      logistics_mark:0,
      goods_mark:0,
      service_mark:0,
      postrate: false,
      form:{
        //      order_detailid:0,  //订单详情ID，自增主键
        //       order_id:0,                         //订单ID，外键

        count:0,                          //购买数量，不允许为空
      },
      goods_id:null,
      category_id:null,
      orderDetail:{

      },
      product: [],
      comments: [],
      newComment: '',
      quantity: 1,
      recommendations: [],
      Browse:[]
    };
  },
  created() {
    this.user_id = localStorage.getItem('user_id');
  },
  methods: {
    openpostCommentdialoge(){
      this.postrate = true;
    },
    addToCart() {
      console.log(this.goods_id);
      console.log(this.form.count);
      this.$http.get("http://localhost:8080/shopCart/addcart", {params:{
//        user_is:this.$route.query.user_id,
//         goods_id:this.$router.goos_id,
          user_id:this.user_id,
          goods_id:this.goods_id,
          count:this.form.count,
        }}).then((res)=>{
        if(res.data==1){
          console.log("加入购物车成功！");
          ElMessage({
            message: '加入购物车成功！',
            type: 'success',
          })
        }else{
          ElMessage({
            message: '加入购物车失败！',
            type: 'Error',
          })
          console.log("加入购物车失败！");
        }
      }).catch(function(err){
        console.log(err);
      })
    },
    addBookmark() {
      // 加入收藏操作
      console.log(this.goods_id);
      this.$http.get("http://localhost:8080/collect/add", {
        params: {
          user_id:this.user_id, // 这里可能需要根据实际用户信息动态设置
          goods_id: this.goods_id,
        }
      }).then((res) => {
        if (res.data == 1) {
          console.log("收藏成功！");
          this.$message({ // 注意：这里假设你使用的是 Element UI 的消息提示
            message: '收藏成功！',
            type: 'success', // 通常成功消息使用 'success' 而不是 'warning'
            plain: true,
          });
        } else {
          this.$message({
            message: '收藏失败！',
            type: 'error', // 错误消息使用 'error'
            plain: true,
          });
          console.log("收藏失败！");
        }
      }).catch((err) => {
        console.log(err);
      })
    },
    //进行传值数据处理
    Parameter(){
      if(this.$route.params.goodsId!=null){
        this.goods_id=this.$route.params.goodsId;
      }
      return this.goods_id;
    },
    Parameter1(){
      if(this.$route.params.categoryId!=null){
        this.category_id=this.$route.params.categoryId;
      }
      return this.category_id;
    },
    showDetais(){
      this.$http.get("http://localhost:8080/goods/queryDetails",{
        params:{
          goods_id:this.Parameter()
        }
      }).then((res)=>{
        this.product = res.data;
        console.log(this.product);
        this.$route.params.goodsId=null
      }).catch(function (err) {
        console.log(err);
      })
    },
    postComment() {
      this.$http.get("http://localhost:8080/comment/addComment",{params:{
          user_id:this.user_id,
          goods_id:this.Parameter(),
          comment_description:this.newComment,
          goods_mark:this.goods_mark,
          logistics_mark:this.logistics_mark,
          service_mark:this.service_mark,
        }}).then((res)=>{
        if (res.data == 1) {
          console.log("评论发送成功！，待审核");
          this.$message({ // 注意：这里假设你使用的是 Element UI 的消息提示
            message: "评论发送成功！，待审核",
            type: 'success', // 通常成功消息使用 'success' 而不是 'warning'
            plain: true,
          });
        } else {
          this.$message({
            message: '评论发送失败！',
            type: 'error', // 错误消息使用 'error'
            plain: true,
          });
          console.log('评论发送失败！');
        }
      }).catch((err) => {
        console.log(err);
      })
      this.postrate = false;
    },
    refreshRecommendations() {
      // 刷新推荐商品操作
      this.$http.get("http://localhost:8080/goods/queryrecomment/",{params:{
          category_id:this.Parameter1()
        }}).then((res)=>{
        this.recommendations = res.data;
        console.log(this.recommendations);
      }).catch(function (err) {
        console.log(err);
      })
    },
    showComment(){
      this.$http.get("http://localhost:8080/comment/showComment/",{params:{
          goods_id:this.Parameter()
        }}).then((res)=>{
        this.comments = res.data;
        console.log(this.comments);
      }).catch(function (err) {
        console.log(err);
      })
    },
    inserBrowse(){
      this.$http.get("http://localhost:8080/browse/inser",{params:{
          user_id:this.user_id,
          goods_id:this.Parameter()
        }}).then((res)=>{
        this.Browse = res.data;
        console.log(this.Browse);
      }).catch(function (err) {
        console.log(err);
      })
    }
  },
  mounted() {
    this.showDetais();
    this.refreshRecommendations();
    this.showComment();
    this.inserBrowse();
  }
};
</script>

<style scoped>
.product-detail {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 150vh;
}

.product-card {
  width: 1200px;
  padding: 20px;
  border-radius: 10px;
}

.product-info {
  display: flex;
  align-items: flex-start;
  max-height:400px;
}
.product-image {
  flex: 1;
}
.product-image img {
  width: 100%;
  height: auto;
}

.product-details {
  flex: 2;
  padding: 0 20px;
}

.price {
  font-size: 20px;
  color: #FF5722;
  margin-top: 10px;
}

.quantity-select {
  margin-top: 10px;
}

.comment-section {
  margin-top: 20px;
}

.comment-input {
  width: 70%;
}

.comment-button {
  margin-top: 10px;
}

.recommendation-section {
  margin-top: 20px;
}
.recommendation-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.recommendation-item {
  width: 150px; /* 设置每张图片的固定宽度 */
  margin-bottom: 20px;
  text-align: center;
}

.recommendation-image {
  width: 200px;
  height: 200px;
}

@media (max-width: 768px) {
  .recommendation-item {
    width: 120px; /* 在小屏幕下调整图片宽度 */
  }
}

</style>
